<template lang="pug">
  el-drawer.commonDrawer(
    :title="`孩子姓名：${info.childrenName}`"
    :visible="visibleDialog"
    append-to-body
    center
    destroy-on-close
    direction="rtl"
    size="720px"
    @close="$_handleCancel"
  )
    .drawer-content(v-loading="loading")
      el-card.header-box(shadow="never" :bodyStyle="{padding: '12px 16px'}")
        h3
          span 考勤时间：
          span.c_secondary {{info.checkInTime | dateFilter('YYYY-MM-DD HH:mm:ss')}} ~ {{info.checkOutTime | dateFilter('YYYY-MM-DD HH:mm:ss')}}
          el-tag.ml5(size="small" :type="info.healthStatus === 1 ? 'danger' : 'success' ") {{info.healthStatus === 1 ? '不健康' : '健康'}}
        el-row.mt20.detail(:gutter="24")
          el-col(:span="8") 月龄: {{info.month}}
          el-col(:span="8") 身高: {{info.height}}
          el-col(:span="8") 体重: {{info.weight}}
          el-col(:span="8") 头围: {{info.header}}
          el-col(:span="8") 异常状况: {{info.exceptionName}}
      el-calendar.calendar
        template(slot="dateCell" slot-scope="{date, data}")
          div(@click="itemClick(data)" class="calendar-item")
            p(:class="{'is-selected': record.includes(data.day), 'is-no-month': data.day.split('-').slice(0, 2).join('-') !== month}")
              | {{ data.day.split('-').slice(1).join('-') }}
            img(v-if="record.includes(data.day)" src="@/assets/gou.png")
      div(v-if="checkItem")
        form-info(:items="infoItems")
        el-row
          el-col
            .formItem
              .title
                span 入园
              .content
                span
                  a-image(:url="checkItem.checkInMediaUrl" width="150px" height="150px" )
          el-col
            .formItem
              .title
                span 离园
              .content
                span
                  a-image(:url="checkItem.checkOutMediaUrl" width="150px" height="150px")
        //div(style="margin-top: 10px;")
        //  a-image(:url="checkItem.checkInMediaUrl" width="150px" height="150px" )
        //  a-image(:url="checkItem.checkOutMediaUrl" width="150px" height="150px")
</template>
<script>
import dayjs from 'dayjs'
import { getAttendanceInfoByChildren, getAttendanceRecordByChildren, getChildrenCheckrRcords } from '../../api'
import FormInfo from '@/components/Basic/Form/FormInfo'
import { checkStatusList } from './config'
import AImage from '@/components/Basic/Image/Image'
export default {
  components: {
    AImage,
    FormInfo
  },
  props: {
    id: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      month: dayjs().format('YYYY-MM'),
      record: [],
      info: [],
      checkItem: null
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },

    infoItems () {
      const { checkItem } = this

      const value = checkItem.status.toString() || ''
      const statusStr = checkStatusList.find(x => x.value === value)?.label || value
      console.log(statusStr)
      return [
        {
          label: '入园时间',
          key: 'checkInTime',
          initialValue: checkItem.checkInTime ? dayjs(checkItem.checkInTime).format('YYYY-MM-DD hh:mm:ss') : ''
        },
        {
          label: '离园时间',
          key: 'checkOutTime',
          initialValue: checkItem.checkOutTime ? dayjs(checkItem.checkOutTime).format('YYYY-MM-DD hh:mm:ss') : ''
        },
        {
          label: '状态',
          key: 'status',
          initialValue: statusStr
        },
        {
          label: '备注',
          key: 'remark',
          initialValue: checkItem.remark
        }
      ]
    }
  },
  watch: {
    visible (val) {
      if (val && this.id) {
        this.getData()
      }
    }
  },
  methods: {
    async getData () {
      const { id, month } = this
      this.loading = true
      // 详情
      this.info = await getAttendanceInfoByChildren({ childrenId: id })
      // 考勤记录
      const record = await getAttendanceRecordByChildren({ childrenId: id, month })
      this.record = (record?.childrenCheckRecordList || []).map(x => {
        return dayjs(x.created).format('YYYY-MM-DD')
      })
      this.loading = false
    },
    $_handleCancel () {
      this.visibleDialog = false
    },

    itemClick (data) {
      const { id } = this
      console.log(data)
      getChildrenCheckrRcords({ childrenId: id, date: data.day }).then(res => {
        console.log(res)
        this.checkItem = res[0]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.header-box{
  font-size: 15px;
  line-height: 1.8;
  color: #666;

  h3 {
    font-weight: normal;
    margin: 10px 0
  }
}

.calendar-item{
  height: 85px;
  text-align: right;
  position: relative;
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.calendar{
  margin-top: 20px;

  ::v-deep{
    .el-calendar__header{
      display: none;
    }
  }

  .is-no-month{
    color: #999999
  }

  .is-selected{
    color: #333
  }
}

.formItem{
  display: flex;

  .title, .content{
    border-right: 1px solid $--border-color-light;
    border-bottom: 1px solid $--border-color-light;

    > span{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block
    }
  }

  .title{
    font-size: 14px;
    color: $--color-text-primary;
    line-height: 1;
    padding: 18px 12px;
    background: #f5f7fa;
    text-align: right;
    box-sizing: border-box;

    > i {
      margin-right: 5px;
      vertical-align: middle;
    }
  }

  .content{
    font-size: 14px;
    color: $--color-text-regular;
    line-height: 1;
    overflow: hidden;
    padding: 18px 12px;
    flex: 1
  }

}
</style>
